<template>
  <div>
    <div>
      <el-col :span="4">
        <div
          class="empData"
          style="padding-right:10px;border-right:1px solid #ccc;height:calc(100vh - 60px)"
        >
          <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
          <el-tree
            @node-click="handlerClick"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div v-if="params.device_id" class="table" style="margin-left: 10px">
          <!-- 工程信息容器 -->
          <el-container style="margin-bottom: 20px">
            <!-- 布局 -->
            <el-header
              style="border-radius: 4px;background-color: #E9EEF3;color: #225;height: 30px;line-height: 30px;"
            >
              <i class="el-icon-s-goods"></i>
              工程信息
            </el-header>
            <el-main style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);background-color: #ffffff;color: #333;">
              <div class="content" style="margin:10px">
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">工程编号</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.serial_number}}</div>
                  </el-col>
                  <el-col :span="2">
                    <div class="tit1">工程名称</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.name}}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">工程类型</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.type}}</div>
                  </el-col>
                  <el-col :span="2">
                    <div class="tit1">工程状态</div>
                  </el-col>
                  <el-col :span="10">
                    <div>
                      <el-tag v-if="engdata.status==='监测中'" type="success">监测中</el-tag>
                      <el-tag v-else type="warning">未监测</el-tag>
                    </div>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">开始时间</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.begin_time}}</div>
                  </el-col>
                  <el-col :span="2">
                    <div class="tit1">结束时间</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.end_time}}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">地址</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.address}}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">工程负责人</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{engdata.id}}</div>
                  </el-col>
                </el-row>
              </div>
            </el-main>
          </el-container>

          <!-- 设备信息容器 -->
          <el-container style="margin-bottom: 20px">
            <!-- 布局 -->
            <el-header
              style="border-radius: 4px;background-color: #E9EEF3;color: #225;height: 30px;line-height: 30px;"
            >
              <i class="el-icon-video-camera-solid"></i>
              设备信息
            </el-header>
            <el-main style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);background-color: #ffffff;color: #333;">
              <div class="content" style="margin:10px">
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">工程设备</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{devdata.serial_number}}</div>
                  </el-col>
                  <el-col :span="2">
                    <div class="tit1">设备名称</div>
                  </el-col>
                  <el-col :span="10">
                    <div class="tit2">{{devdata.name}}</div>
                  </el-col>
                </el-row>
                <el-row type="flex" class="row-style">
                  <el-col :span="2">
                    <div class="tit1">绑定状态</div>
                  </el-col>
                  <el-col :span="10">
                    <div>
                      <el-tag v-if="devdata.bind_status===1" type="success">已绑定</el-tag>
                      <el-tag v-else type="warning">未绑定</el-tag>
                    </div>
                  </el-col>
                  <el-col :span="2">
                    <div class="tit1">在线状态</div>
                  </el-col>
                  <el-col :span="10">
                    <div>
                      <el-tag v-if="devdata.online_status===1" type="success">在线</el-tag>
                      <el-tag v-else type="warning">离线</el-tag>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-main>
          </el-container>
        </div>
        <div v-else style="margin:40px;color:red;text-align:center;" >请选择设备进行查看</div>
      </el-col>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      //保存查寻设备id
      devData: "",
      //保存工程信息
      engdata: "",
      //保存设备信息
      devdata: "",
      // 过滤文本
      filterText: "",
      // 树形结构数据源
      data: [],
      // 树形结构配置项
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 携带参数
      params: {
        page: 1,
        pageSize: 10,
        engineer_id: "",
        device_id: ""
      },
    };
  },
  watch: {
    // 监听文本进行过滤
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {},
  methods: {
    // 点击树形节点
    handlerClick(data,value) {
      // data 一级节点数据 value 二级节点数据 node组件本身
      //data 点击工程 data---工程数据 children
      //data 点击设备 data---设备数据 没有children
      //判断点击的是设备
      if (!data.children) {
        this.params.engineer_id = data.engineer_id;
        this.params.device_id = data.id;
        this.devData = data.id;
      }
      // this.getEmpData();
      this.getdevData();
    },
    //获取设备详情信息--右侧数据
    async getdevData() {
      let res = await get("/device/findDeviceDetail", {
        id: this.devData
      });
      console.log(res, "设备详情");
      this.devdata = res.data;
      this.engdata = res.data.engineer;
    },
    // 获取工程设备数据--左侧数据
    async loadEmpData() {
      let res = await get("/engineer/findEngineerDeviceTree");
      // console.log(res,"-=-=-=-");
      this.data = res.data;
    },
    
    // 过滤节点的方法
    filterNode(value, data) {
      if (!value) return true;
      // indexOf寻找字符串中某个字符，存在返回下标
      // return data.label.indexOf(value) !== -1;
      return data.name.indexOf(value) !== -1;
    }
  },

  created() {
    this.loadEmpData();
  },
  mounted() {}
};
</script>
<style>
.title {
  font-size: 16px;
}
.el-row {
  margin: 28px;
  font-size: 14px;
}
.tit1 {
  font-weight: bold;
}
.el-tag {
  size: medium;
}
</style>
